<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>
  	<link rel="stylesheet" type="text/css" href="assets/css/lightbox.css" />
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h2>제품 매핑</h2>
		</div>

		<form id="mappingProduct" class="form-horizontal" role="form" method="post" action="requestProduct.do">
		
			<input type="hidden" name="idPouchProduct" value="${cmd.idPouchProduct}"/>
		
			<fieldset>
				<div class="form-group">
					<label for="idRequestProduct" class="col-md-2 control-label">요청번호</label>
					<div class="col-md-10">
						<p class="form-control-static">${cmd.idPouchProduct}</p>
					</div>
				</div>
			
				<div class="form-group">
					<label for="nickName" class="col-md-2 control-label">닉네임</label>
					<div class="col-md-10">
						<p class="form-control-static">${cmd.nickName}</p>
					</div>
				</div>

				<div class="form-group">
					<label for="created_date" class="col-md-2 control-label">요청시간</label>
					<div class="col-md-10">
						<p class="form-control-static">${fn:substring(cmd.create_date, 0, 4)}-${fn:substring(cmd.create_date, 4, 6)}-${fn:substring(cmd.create_date, 6, 8)}
						&nbsp;${fn:substring(cmd.create_date, 8, 10)}:${fn:substring(cmd.create_date, 10, 12)}</p>
					</div>
				</div>
				
				<div class="form-group">
					<label for="requestText" class="col-md-2 control-label">요청내용</label>
					<div class="col-md-10">
						<p class="form-control-static">${cmd.requestText}</p>
					</div>
				</div>

				<div class="form-group">
					<label for="requestImg" class="col-md-2 control-label">사진</label>
					<div class="col-md-10">
						<c:choose>
							<c:when test="${image == null}">
								<p class="form-control-static">등록된 이미지가 존재하지 않습니다.</p>
							</c:when>
							<c:otherwise>
								<div class="row">
									<div class="col-md-4">
										<p class="form-control-static">
											<a href="download.jsp?${image}" data-lightbox="roadtrip" title="${cmd.nickName}">
												<img src="download.jsp?${image}" class="img-thumbnail img-responsive"/>
											</a>
										</p>
									</div>
									<div class="col-md-8">
										<br/>
										<ul>
											<li>항번: ${image.idAttacheFile}</li>
											<li>원본 파일 이름: ${image.fileOrgName}</li>
											<li>파일 크기: ${image.fileSize}byte</li>
											<li>업로드된 파일 이름: ${image.fileSaveName}</li>
											<li>업로드된 폴더 경로: ${image.fileDir}</li>
											<li>파일 타입: ${image.fileType}</li>
										</ul>
									</div>
								</div>
							</c:otherwise>
						</c:choose>
					</div>
				</div>

				<div class="form-group">
					<label for="brand" class="col-md-2 control-label">제품매핑</label>
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-6">
								<select name="brand" class="form-control">
									<option value="default">- 브랜드를 선택하세요 -</option>
									<c:forEach items="${brand}" var="brand">
										<option value="${brand.idBrand}">${brand.brandTitle}</option>
									</c:forEach>
								</select>
							</div>
							<div class="col-md-6">
								<select name="product" class="form-control">
									<option value="default">- 브랜드를 먼저 선택하세요 -</option>
								</select>
							</div>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">매핑하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>
					</div>
				</div>

			</fieldset>
		</form>
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/lightbox-2.6.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("select[name='brand']").change(function() {
				$("select[name='product']").empty();
				
				var brand = $(this).find("option:selected").val();
				
				$.ajax({
					url: "ajax/brand.jsp",
					data: "brand=" + brand,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idProduct = $(this).find("idProduct").text();
							var productTitle = $(this).find("productTitle").text();
							
							var option = $("<option>").html(productTitle);
							option.attr({'value' : idProduct});
							
							$("select[name='product']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
		});
	</script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#mappingProduct").submit(function() {
				
				if ($("select[name='brand'] > option:selected").index() < 1) {
					alert("브랜드를 선택하세요.");
					$("select[name='brand']").focus();
					return false;
				}
				
				if ($("select[name='product'] > option:selected").index() < 1) {
					alert("제품을 선택하세요.");
					$("select[name='product']").focus();
					return false;
				}
				
				if (!confirm("정말 매핑하시겠습니까?")) {
					return false;
				}
				
			});
		});
	</script>
  </body>
</html>